<template>
  <div id="app">
    <canvas id="appCanvas" ref="appCanvas"></canvas>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'GnervPabu',
    mounted: function () {
      var canvas = document.getElementById('appCanvas')
      var ctx = canvas.getContext('2d')
      ctx.rotate(-20 * Math.PI / 180)
      ctx.fillStyle = 'rgba(100,100,100,0.20)'
      ctx.font = '14px Arial'
      ctx.fillText('Hello World!', 20, 120)
      var data = canvas.toDataURL('image/png', 1)
      var app = document.getElementById('app')
      app.style.backgroundImage = 'url(' + data + ')'
    },
    methods: {},
    created () {
    }
  }
</script>

<style>
  /* CSS */
  * {
    margin: 0;
    padding: 0;
    float: none;
  }

  html, body, #app {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  #appCanvas {
    position: absolute;
    width: 300px;
    height: 150px;
  }

  /* google 浏览器滚动条 */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #5cadff;
    border-radius: 3px;
  }
</style>
